<template>
    <div class="login">
        <div class="loginBox">
            <div class="cardBox">
                <el-card shadow="hover">
                    <el-tooltip
                class="item"
                effect="dark"
                content="默认账号：admin 默认密码：123456"
                
                placement="right"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
                    <h1 style="text-align: center;">{{ $store.state.title }}</h1>
                    <div class="inputBox">
                        <div class="text">账号：</div>
                        <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="user.username">
                        </el-input>
                    </div>
                    <div class="inputBox">
                        <div class="text">密码：</div>
                        <el-input placeholder="请输入密码" type="password" prefix-icon="el-icon-lock" v-model="user.password">
                        </el-input>

                    </div>
                    <div class="butBox">
                        <p>未有账号,<router-link to="/regist">立即注册</router-link></p>
                        <el-button type="danger" @click="doLogin">登录</el-button>
                    </div>
                </el-card>

            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    doLogin() {
      
      // 一点击登录按钮，这个方法就会执行

      if (this.user.username == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return;
      }
      if (this.user.password == "") {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
        return;
      }
      var url = "/api/login";
      var d="?name="+this.user.username+"&password="+this.user.password;
      this.axios.get(url+d)
        .then((response)=>{
          alert(response.data);
          if(response.data=="登录成功"){
          this.$store.commit("getUserName",this.user.username);
          this.$router.push({path: "/index"});//跳转到成功页
          }
        }).catch(function (error){
          alert("get请求失败");
          this.$router.push({path: "/error"}); //跳转到失败页
        })
     
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 离开当前页面时执行代码
  destroyed() {
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.login {
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url('../assets/img/dl.jpg');
    background-size: cover;
    background-position: center;
}

.loginBox {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0.7; 
    /* background-color: rgba(0, 0, 0, 0.5); 设置背景颜色的透明度为 0.5 */
}

.cardBox {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.inputBox {
    display: flex;
    margin-bottom: 20px;
    
}

.text {
    width: 100px;
    line-height: 40px;
    text-align: right;
}

.butBox {
    text-align: center;
}

a {
    text-decoration: none;
    color: #F56C6C;
}
</style>